<template>
  <div class="otherContainer">
    <el-tabs v-model="activeName" type="border-card" @tab-click="changeTabs">
      <el-tab-pane label="物流节点展示" name="first">
        <div class="tempSearchContainer">
          <div class="siteSearch">
            &nbsp;<span style="color: red">*&nbsp;</span
            >订单号&nbsp;&nbsp;&nbsp;
            <el-select
              v-model="selectedCode"
              filterable
              remote
              reserve-keyword
              placeholder="搜索订单号"
              :remote-method="remoteMethod"
              :loading="loading"
              @focus="getCodeList"
              @change="searchOrderTemp(selectedCode)"
              disabled
            >
              <el-option
                v-for="item in displayCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button @click="closeOtherOrderInfo" type="primary"
            >关闭</el-button
          >
          <!-- <div class="siteSearch">
            物流公司&nbsp;&nbsp;&nbsp;
            <el-select
              v-model="selectedCompany"
              filterable
              remote
              :remote-method="remoteMethodCompany"
              reserve-keyword
              placeholder="选择物流公司"
              :loading="loading"
              @focus="getCompanyList"
              @change="searchOrderTemp(selectedCompany)"
            >
              <el-option
                v-for="item in displayCompany"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="siteSearch">
            快递单号&nbsp;&nbsp;&nbsp;
            <el-input
              size="mini"
              v-model="expressCode"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <el-button type="primary" @click="submitTrans"
            >查询物流节点</el-button
          > -->
          <div class="tempList">
            <el-card class="card3">
              <div style="font-size: 14px; margin-bottom: 10px">
                第三方承运商物流节点信息
              </div>
              <div
                v-if="!activities.length"
                style="
                  border: 1px solid #ebeef5;
                  text-align: center;
                  font-size: 12px;
                  line-height: 60px;
                  width: 100%;
                  color: #909399;
                "
              >
                暂无数据
              </div>
              <el-timeline v-if="activities.length">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :color="activity.color"
                  :timestamp="activity.time"
                >
                  <h4>
                    {{ activity.status }}
                  </h4>
                  <h5>
                    {{ activity.areaName }}
                  </h5>
                  {{ activity.context }}
                </el-timeline-item>
              </el-timeline>
            </el-card>
            <el-card class="card1">
              <div style="font-size: 14px; margin-bottom: 10px">
                温度数据同步
              </div>
              <el-table
                :data="tableData"
                style="width: 100%"
                :height="tableData.length ? '300' : '100'"
                border
              >
                <el-table-column label="时间" width="240" prop="time">
                </el-table-column>
                <el-table-column label="位置" width="100" prop="address">
                </el-table-column>
                <el-table-column label="温度" prop="temp"> </el-table-column>
                <!-- <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete1(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column> -->
              </el-table>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="查询温度和位置" name="second">
        <div class="tempAndSiteContainer">
          <div class="timeSearch">
            &nbsp;<span style="color: red">*&nbsp;</span
            >订单号&nbsp;&nbsp;&nbsp;
            <el-select
              v-model="selectedCode"
              filterable
              remote
              reserve-keyword
              placeholder="搜索订单号"
              :remote-method="remoteMethod"
              :loading="loading"
              @focus="getCodeList"
              @change="searchOrderTemp(selectedCode)"
            >
              <el-option
                v-for="item in displayCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="timeSearch">
            设备厂商&nbsp;&nbsp;&nbsp;
            <el-select v-model="manufacturer" placeholder="请选择">
              <el-option
                v-for="item in manufacturerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="timeSearch">
            设备编号&nbsp;&nbsp;&nbsp;
            <el-input
              v-model="deviceNumber"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="timeSearch">
            时间范围&nbsp;&nbsp;&nbsp;
            <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 215px"
            >
            </el-date-picker>
          </div>
          <el-button type="primary" @click="searchTempAndGps">查询</el-button>
          <el-button type="primary" @click="printTempAndGps">打印</el-button>
          <div id="printMe">
            <div class="ordersInfo">
              <h4 class="infoTitle" style="margin-bottom: 10px">订单信息</h4>
              <div
                class="infoBody"
                style="
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                "
              >
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  订单编号：{{ selectedCode }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  订单状态：{{ order_state }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  发运方：{{ customer_company }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  承运方：{{ logistics_name }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  收货方：{{ receiver_company }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  运输方式：{{ delivery_method }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  是否冷链：{{ is_cold }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  记录间隔：5分钟
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  湿度范围：{{ humidity_lowlimit }}~{{ humidity_uplimit }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  温度范围： 2℃~8℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  实际最高温度：{{ temperature_uplimit }}℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  实际最低温度：{{ temperature_lowlimit }}℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  启运时间：{{ startTime }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  签收时间：{{ endTime }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                ></div>
              </div>
            </div>
            <div class="transInfo" v-show="showPosition">
              <h4 style="margin: 20px 0">物流节点信息</h4>
              <el-table
                :data="noPositionList"
                border
                style="width: 100%; border: 2px solid #ebeef5"
                :height="tableData.length ? '600' : '100'"
              >
                <el-table-column prop="device_ts" label="采集时间">
                </el-table-column>
                <el-table-column prop="address" label="位置"> </el-table-column>
                <el-table-column prop="collect_ts" label="上报时间">
                </el-table-column>
              </el-table>
            </div>
            <div
              ref="chart"
              class="echarts"
              style="margin-top: 25px; width: 100%; height: 400px"
            ></div>
            <div class="tempTable" v-if="positionList.length">
              <h4 style="margin-bottom: 20px">温度数据</h4>
              <table
                style="
                  font-size: 12px;
                  text-align: center;
                  border-collapse: collapse;
                "
              >
                <tr style="width: 100%; display: flex; flex-wrap: wrap">
                  <td
                    style="
                      border: 1px solid #ebeef5;
                      height: 29.4px;
                      line-height: 29.5px;
                      padding: 0 10px;
                    "
                    v-for="(item, index) in tempTable"
                    :key="index"
                  >
                    {{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.temp }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <el-button style="margin: 20px 350px" @click="closeOtherOrderInfo"
            >关闭</el-button
          >
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="温度数据实时同步" name="second">
        <div class="tempAndSiteContainer">
          <!-- <div class="timeSearch">
            &nbsp;<span style="color: red">*&nbsp;</span
            >订单号&nbsp;&nbsp;&nbsp;
            <el-select
              v-model="selectedCode"
              filterable
              remote
              reserve-keyword
              placeholder="搜索订单号"
              :remote-method="remoteMethod"
              :loading="loading"
              @focus="getCodeList"
              @change="searchOrderTemp(selectedCode)"
            >
              <el-option
                v-for="item in displayCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="timeSearch">
            设备厂商&nbsp;&nbsp;&nbsp;
            <el-select v-model="manufacturer" placeholder="请选择">
              <el-option
                v-for="item in manufacturerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="timeSearch">
            设备编号&nbsp;&nbsp;&nbsp;
            <el-input
              v-model="deviceNumber"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="timeSearch" style="width: 61%">
            时间范围&nbsp;&nbsp;&nbsp;
            <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 380px"
            >
            </el-date-picker>
          </div>
          <el-button type="primary" @click="searchTempAndGps">查询</el-button> -->
          <el-button
            type="primary"
            @click="printTempAndGps"
            style="margin-bottom: 20px"
            >打印</el-button
          >
          <div id="printMe">
            <div class="ordersInfo">
              <h4 class="infoTitle" style="margin-bottom: 10px">订单信息</h4>
              <div
                class="infoBody"
                style="
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                "
              >
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  订单编号：{{ selectedCode }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  设备厂商：{{ manufacturer }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  设备编号：{{ deviceNumber }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 500px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  时间范围：{{
                    new Date(Number(timeRange[0])).toLocaleString()
                  }}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{
                    new Date(Number(timeRange[1])).toLocaleString()
                  }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  订单状态：{{ order_state }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  发运方：{{ customer_company }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  承运方：{{ logistics_name }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  收货方：{{ receiver_company }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  运输方式：{{ delivery_method }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  是否冷链：{{ is_cold }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  记录间隔：5分钟
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  湿度范围：{{ humidity_lowlimit }}~{{ humidity_uplimit }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  温度范围： 2℃~8℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  实际最高温度：{{ temperature_uplimit }}℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  实际最低温度：{{ temperature_lowlimit }}℃
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  启运时间：{{ startTime }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                >
                  签收时间：{{ endTime }}
                </div>
                <div
                  class="infoItem"
                  style="
                    width: 250px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  "
                ></div>
              </div>
            </div>
            <div class="transInfo" v-show="showPosition">
              <h4 style="margin: 20px 0">物流节点信息</h4>
              <el-table
                :data="noPositionList"
                border
                style="width: 100%; border: 2px solid #ebeef5"
                :height="tableData.length ? '600' : '100'"
              >
                <!-- <el-table-column prop="date" label="节点" width="100">
              </el-table-column> -->
                <el-table-column prop="device_ts" label="采集时间">
                </el-table-column>
                <el-table-column prop="address" label="位置"> </el-table-column>
                <el-table-column prop="collect_ts" label="上报时间">
                </el-table-column>
              </el-table>
            </div>
            <div
              ref="chart"
              class="echarts"
              style="margin-top: 25px; width: 100%; height: 400px"
            ></div>
            <div class="tempTable" v-if="positionList.length">
              <h4 style="margin-bottom: 20px">温度数据</h4>
              <table
                style="
                  font-size: 12px;
                  text-align: center;
                  border-collapse: collapse;
                "
              >
                <!-- <th style="display: block; width: 100px"></th> -->
                <tr style="width: 100%; display: flex; flex-wrap: wrap">
                  <td
                    style="
                      border: 1px solid #ebeef5;
                      height: 29.4px;
                      line-height: 29.5px;
                      padding: 0 10px;
                    "
                    v-for="(item, index) in tempTable"
                    :key="index"
                  >
                    {{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.temp }}
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <el-button style="margin: 20px 350px" @click="closeOtherOrderInfo"
            >关闭</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import "echarts/lib/component/markPoint"; //引入提示气泡
import print from "print-js";
import {
  reqOrdersCode,
  // reqOrderTemp,
  reqOrderDetail,
  deleteOrderDetail,
  addOrderDetail,
  reqTransCompany,
  reqTransInfo,
  reqTempAndGps,
} from "@/api/orderForm";
import moment from "moment";
export default {
  name: "otherOrderInfo",
  props: ["closeOtherOrderInfo"],
  data() {
    return {
      activeName: "first",
      clock: {}, //循环定时器
      codeList: [], //服务器数据
      selectedCode: [],
      companyList: [], //服务器数据
      displayCode: [],
      displayCompany: [],
      loading: false,
      tableData: [],
      form: [
        {
          time: new Date(new Date().setHours(0, 0, 0, 0)),
          address: "",
          temp: "",
        },
      ],
      lineNum: 1,
      token: "",
      timeRange: [
        new Date(new Date().setHours(0, 0, 0, 0)),
        new Date(new Date().setHours(23, 59, 59, 59)),
      ],
      selectedCompany: "", //选中的的物流公司
      expressCode: "", //输入的快递单号
      activities: [],
      manufacturerList: [
        { value: "鲁尔", label: "鲁尔" },
        { value: "精创", label: "精创" },
        { value: "易流云", label: "易流云" },
      ],
      manufacturer: "", //选择的厂商
      deviceNumber: "", //设备编号
      // deviceType: "", //设备型号
      positionList: [], //物流位置信息
      noPositionList: [], //没有位置信息显示空
      tempTable: [], //温度表格信息
      order_state: "", //订单状态
      customer_company: "", //发运方
      logistics_name: "", //承运方
      receiver_company: "", //收货方
      delivery_method: "", //运输方式
      is_cold: "", //是否冷链
      humidity_lowlimit: "", //湿度最高
      humidity_uplimit: "", //湿度最低
      temperature_uplimit: "", //实际最高温
      temperature_lowlimit: "", //实际最低温
      startTime: "", //启运时间
      endTime: "", //签收时间
      showPosition: true, //若没有位置信息的话打印就不显示
      echartsOptions: {
        //echarts的配置项
        title: {
          show: true,
          text: "温度变化折线图", //主标题
          textAlign: "center",
          left: 80,
          fontSize: 12,
          fontWeight: "normal",
        },
        color: [
          "#37A3DC",
          "#B8E986",
          "#FFA080",
          "#71FFA9",
          "#68E1E3",
          "#FFD747",
          "#E162AF",
          "#A487FF",
        ], //修改legend的颜色
        legend: {
          //多条线用标注
          data: ["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8"],
        },
        xAxis: {
          show: true,
          boundaryGap: false,
          position: "bottom",
          data: [],
        },
        yAxis: {
          show: true,
          type: "value", //为了匹配上命名规则
          axisLine: {
            //坐标轴线
            show: true,
          },
          axisTick: {
            //坐标轴刻度
            show: true,
          },
          axisLabel: {
            //每个数据都加单位
            formatter: "{value}℃",
          },
        },
        series: [],
        grid: {
          left: 50,
          top: 50,
          bottom: 50,
          right: 50,
        },
      },
    };
  },
  watch: {
    activeName() {
      if (this.activeName === "second") {
        this.clock = setInterval(() => {
          if (this.manufacturer !== "" && this.deviceNumber !== "") {
            this.searchTempAndGps();
          }
        }, 60000);
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.clock);
  },
  mounted() {
    this.token = getToken("Cookie");
    this.selectedCode = this.$parent.selectedNums[0];
    // this.searchOrderTemp(this.selectedCode);
    this.submitTrans();
    this.searchOrderTemp(this.selectedCode);
    this.searchTempAndGps();
  },
  methods: {
    async getCodeList() {
      let result = await reqOrdersCode(this.token);
      this.codeList = result.data.list.map((item) => {
        return {
          value: `${item.order_code}`,
          label: `${item.order_code}`,
        };
      });
      this.displayCode = this.codeList;
    },
    remoteMethod(query) {
      const token = this.token;
      if (query !== "") {
        this.loading = true;
        // setTimeout(async () => {
        //   this.loading = false;
        //   let result = await reqOrderTemp({ str: query, token });
        //   this.codeList = result.data.map((item) => {
        //     return {
        //       value: `${item}`,
        //       label: `${item}`,
        //     };
        //   });
        // }, 200);
        setTimeout(() => {
          //前端做的模糊查询
          this.loading = false;
          this.displayCode = this.codeList.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.displayCode = [];
      }
    },
    async searchOrderTemp(code) {
      //选中订单号之后的请求和显示数据
      const token = this.token;
      let result = await reqOrderDetail({ code, token });
      let list = result.data.map((item) => {
        return {
          time: moment(new Date(Number(item.create_ts)).getTime()).format(
            "YYYY-MM-DD HH:mm:ss"
          ), //一定要Date格式才能用moment转,然后Date()里面只能接收数字类型
          address: item.position,
          temp: item.temperature.toString(),
          id: item.tp_id,
        };
      });
      this.tableData = list;
    },
    async handleDelete1(index, row) {
      const token = this.token;
      await deleteOrderDetail({
        code: this.selectedCode,
        id: row.id,
        token,
      });
      this.tableData.splice(index, 1);
    },
    changeTabs() {
      // this.selectedCode = "";
      // this.activities = [];
    },
    async getCompanyList() {
      let result = await reqTransCompany();
      this.companyList = result.data.map((item) => {
        return {
          value: `${item.logistics_name}`,
          label: `${item.logistics_name}`,
        };
      });
      this.displayCompany = this.companyList;
    },
    remoteMethodCompany(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.displayCompany = this.companyList.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.displayCompany = [];
      }
    },
    async submitTrans() {
      this.activities = [];
      const { token, expressCode, selectedCode, selectedCompany } = this;
      let result = await reqTransInfo({
        code1: selectedCode,
        code2: expressCode,
        name: selectedCompany,
        token,
        is_correct: 1,
      });
      // if (result.status === 201) {
      //   this.$message({
      //     type: "error",
      //     message: "首次查询时必须提供快递单号和物流公司",
      //   });
      // }
      this.activities.push(
        Object.assign(result.data.logistics_info[0], { color: "#e69850" })
      );
      for (var i = 1; i < result.data.logistics_info.length; i++) {
        this.activities.push(result.data.logistics_info[i]);
      }
    },
    async searchTempAndGps() {
      this.positionList = []; //物流位置信息
      this.tempTable = [];
      Object.assign(
        this.$data.echartsOptions,
        this.$options.data().echartsOptions
      );
      const { manufacturer, deviceNumber, timeRange, selectedCode } = this;
      try {
        let result = await reqTempAndGps({
          code: selectedCode,
          firm: manufacturer,
          device_id: deviceNumber,
          start_time: new Date(timeRange[0]).getTime(),
          end_time: new Date(timeRange[1]).getTime(),
        });
        const {
          order_state,
          customer_company,
          logistics_name,
          receiver_company,
          delivery_method,
          is_cold,
          humidity_lowlimit,
          humidity_uplimit,
          temperature_lowlimit,
          temperature_uplimit,
        } = result.data.order;
        this.order_state = order_state;
        this.customer_company = customer_company;
        this.logistics_name = logistics_name;
        this.receiver_company = receiver_company;
        this.delivery_method = delivery_method;
        if (is_cold) {
          this.is_cold = "是";
        } else {
          this.is_cold = "否";
        }
        this.humidity_lowlimit = humidity_lowlimit;
        this.humidity_uplimit = humidity_uplimit;
        this.temperature_lowlimit = result.data.min_temp;
        this.temperature_uplimit = result.data.max_temp;
        // moment(new Date(item.time).getTime()).format("YYYY-MM-DD HH:mm")
        this.startTime = moment(new Date(this.timeRange[0]).getTime()).format(
          "YYYY-MM-DD HH:mm"
        );
        this.endTime = moment(new Date(this.timeRange[1]).getTime()).format(
          "YYYY-MM-DD HH:mm"
        );
        let arr = [];
        result.data.position.forEach((item) => {
          if (item.place_name !== null) {
            arr.push({
              device_ts: moment(item.device_ts * 1000).format(
                "YYYY-MM-DD HH:mm"
              ),
              collect_ts: moment(item.collect_ts * 1000).format(
                "YYYY-MM-DD HH:mm"
              ),
              address: item.place_name,
            });
            this.noPositionList = arr;
            this.showPosition = true;
          } else {
            arr.push({
              device_ts: moment(item.device_ts * 1000).format(
                "YYYY-MM-DD HH:mm"
              ),
              collect_ts: moment(item.collect_ts * 1000).format(
                "YYYY-MM-DD HH:mm"
              ),
              address: "无",
            });
            this.noPositionList = [];
            this.showPosition = false;
          }
        });
        this.positionList = arr;
        let arr1 = []; //有哪些非空的t属性
        for (let key in result.data.temp[0]) {
          if (new RegExp("^t.*$").test(key)) {
            if (result.data.temp[0][key] !== null) {
              arr1.push(key);
            }
          }
        }
        let series = []; //有几个温度数据就有几个配置对象
        let timeX = []; //折线图x轴
        let tempY = {}; //折线图y轴
        for (var i = 0; i < arr1.length; i++) {
          let arr3 = [];
          result.data.temp.forEach((item) => {
            arr3.push(item[arr1[i]]);
          });
          this.$set(tempY, `t${i + 1}`, arr3);
          series.push({
            type: "line",
            name: `t${i + 1}`, //为了匹配上legend的标注
            data: tempY[`t${i + 1}`],
            symbolSize: 0,
            markPoint: {
              //提示最大最小值
              symbolSize: 40, //提示气泡的大小
              itemStyle: {
                //提示气泡的样式
                normal: {
                  color: this.echartsOptions.color[i],
                },
              },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
              color: this.echartsOptions.color[i],
            },
          });
        }
        result.data.temp.forEach((item) => {
          timeX.push(moment(item.device_ts * 1000).format("YYYY-MM-DD HH:mm"));
        });
        this.echartsOptions.xAxis.data = timeX; // 横坐标设置
        this.echartsOptions.series = series; // 数据设置
        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(this.echartsOptions);
        // [{time:2022,temp:'t1/t2/t3...'},{},{},{},{},{},{},{},...]
        for (let i = 0; i < result.data.temp.length; i++) {
          let str = "";
          for (var j = 0; j < arr1.length; j++) {
            str += tempY[`t${j + 1}`][i] + "/";
          }
          this.tempTable.push({
            time: timeX[i],
            temp: str,
          });
        }
      } catch (error) {
        // console.log(error);
      }
    },
    printTempAndGps() {
      const style = "@page {margin:10mm};"; //可选-打印时去掉眉页眉尾
      print({
        printable: "printMe", // 标签元素id
        type: "html",
        header: "",
        targetStyles: ["*"],
        style,
        scanStyles: false, //printjs打印样式出错加这个
      });
    },
  },
};
</script>

<style scoped lang="less">
.otherContainer {
  width: 800px;
  // height: calc(100vh - 72px);
  height: auto;
  overflow: auto;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 100;
  .tempSearchContainer {
    // .tempSearch {
    //   font-size: 12px;
    // }
    .siteSearch {
      font-size: 12px;
      margin-bottom: 15px;
      display: inline-block;
      width: 300px;
      .el-input {
        width: 180px;
      }
    }
    .card3 {
      margin-bottom: 10px;
    }
    .tempList {
      margin-top: 20px;
      .card1 {
        margin-bottom: 10px;
      }
    }
  }
  .tempAndSiteContainer {
    .timeSearch {
      font-size: 12px;
      margin-bottom: 20px;
      display: inline-block;
      width: 300px;
      .el-input {
        width: 180px;
      }
    }
    // #printMe {
    //   .ordersInfo {
    //     margin-bottom: 20px;
    //     infoTitle {
    //       font-size: 14px;
    //       font-weight: 1400;
    //     }
    //     infoBody {
    //       display: flex;
    //       justify-content: space-between;
    //       infoItem {
    //         width: 300px;
    //       }
    //     }
    //   }
    //   .transInfo {
    //     margin-bottom: 20px;
    //   }
    // }
  }
}
</style>